import cs from 'classnames'
import Image from 'next/image'
import React, { useContext, useEffect, useState } from 'react'

import { EnumsRes, Violation } from '@/api/interface'
import { Enums } from '@/api/modules'
import complaint from '@/assets/images/complaint.png'
import complaintActive from '@/assets/images/complaint_active.png'
import confirm from '@/assets/images/confirm.png'
import confirmActive from '@/assets/images/confirm_active.png'
import personal from '@/assets/images/personal.png'
import setupBg from '@/assets/images/setup.png'
import setupBgActive from '@/assets/images/setup_active.png'
import setupBgFirstActive from '@/assets/images/setup_first_active.png'
import setupBgLast from '@/assets/images/setup_last.png'
import setupBgLastActive from '@/assets/images/setup_last_active.png'
import verification from '@/assets/images/verification.png'
import verificationActive from '@/assets/images/verification_active.png'
import { GlobalContext } from '@/context'
import useLocale from '@/utils/useLocale'

import ComplaintDetails from './components/ComplaintDetails'
import PersonalDetails from './components/PersonalDetails'
import ReviewAndConfirm from './components/ReviewAndConfirm'
import TankYou from './components/TankYou'
import Verification from './components/Verification'
import locale from './locale'
import styles from './styles/index.module.less'

export default function Form({ setIsHome }: { setIsHome: (_: boolean) => void }) {
  const t = useLocale(locale)
  const { lang } = useContext(GlobalContext)

  useEffect(() => {
    getEnums()
  }, [])

  const [enums, setEnums] = useState<{ [key: string]: EnumsRes[] }>({
    Emirate: [],
    ViolationType: [],
    Complainant: [],
    Nationality: [],
    ViolatorOrWitness: [],
  })

  const getEnums = async () => {
    const enumData = await Promise.all([
      Enums({ type: 'EmirateEnums' }),
      Enums({ type: 'ViolationTypeEnums' }),
      Enums({ type: 'NationalityEnums' }),
      Enums({ type: 'ComplainantEnums' }),
      Enums({ type: 'ViolatorOrWitnessEnums' }),
    ])
    try {
      setEnums({
        Emirate: enumData[0].data,
        ViolationType: enumData[1].data,
        Nationality: enumData[2].data,
        Complainant: enumData[3].data,
        ViolatorOrWitness: enumData[4].data,
      })
    } catch (_) {}
  }

  const [setup, setSetup] = useState(1)
  const [code, setCode] = useState('')
  const [violation, setViolation] = useState<Partial<Violation>>({ supportEntities: [] })

  useEffect(() => {
    window.scrollTo({ top: 0 })
  }, [setup])

  const setupList = [
    { icon: personal, icon_active: personal, title: t['form.setup.personal'] },
    { icon: verification, icon_active: verificationActive, title: t['form.setup.verification'] },
    { icon: complaint, icon_active: complaintActive, title: t['form.setup.complaint'] },
    { icon: confirm, icon_active: confirmActive, title: t['form.setup.confirm'] },
  ]

  const FormComponents: { [key: number]: JSX.Element } = {
    1: (
      <PersonalDetails
        t={t}
        lang={lang}
        enums={enums}
        setSetup={setSetup}
        setIsHome={setIsHome}
        violation={violation}
        setViolation={setViolation}
      />
    ),
    2: (
      <Verification t={t} setSetup={setSetup} violation={violation} code={code} setCode={setCode} />
    ),
    3: (
      <ComplaintDetails
        t={t}
        lang={lang}
        enums={enums}
        setSetup={setSetup}
        violation={violation}
        setViolation={setViolation}
      />
    ),
    4: (
      <ReviewAndConfirm t={t} lang={lang} enums={enums} setSetup={setSetup} violation={violation} />
    ),
    5: <TankYou t={t} />,
  }

  return (
    <section className={cs(styles['form-container'], lang === 'en-US' ? '' : styles['form-rtl'])}>
      <main className={styles['form-main']}>
        {setup < 5 && (
          <div className={styles['form-setup']}>
            {setupList.map((item, index) => {
              const isComplete = index < setup
              const isActive = index === setup - 1
              const isFirst = index === 0
              const isLast = index === setupList.length - 1

              let setupBackground
              if (!isActive) setupBackground = isLast ? setupBgLast : setupBg
              else
                setupBackground = isLast
                  ? setupBgLastActive
                  : isFirst
                    ? setupBgFirstActive
                    : setupBgActive

              return (
                <React.Fragment key={item.title}>
                  <div className={styles['setup-item']}>
                    <Image src={setupBackground} className={styles['setup-bg']} alt="bg" />
                    <Image
                      src={isComplete ? item.icon_active : item.icon}
                      className={styles['setup-icon']}
                      alt="icon"
                    />
                    <span
                      className={`${styles['setup-title']} ${
                        isComplete ? styles['setup-title-complete'] : ''
                      }`}
                    >
                      {item.title}
                    </span>
                  </div>
                </React.Fragment>
              )
            })}
          </div>
        )}
        <div className={styles['form-content']} key={setup}>
          {FormComponents[setup]}
        </div>
      </main>
    </section>
  )
}
